<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common/header::common_head"></head>
<title>尺码管理</title>
<!-- DataTables -->
<link rel="stylesheet" href="../../bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<style type="text/css">
    .shadow{
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:998;
        background-color:gainsboro;
        opacity:0.6;
        display:none;
    }
    #addSize{
        position:fixed;
        z-index:999;
        display:none;
        top: 30%;
        left: 40%;

    }
    #editSize{
        position:fixed;
        z-index:999;
        display:none;
        top: 30%;
        left: 40%;

    }
    #editGroup{
        position:fixed;
        z-index:999;
        display:none;
        top: 30%;
        left: 40%;

    }
    #addTd{
        float: right;
        margin: 15px;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <div th:replace="common/LeftCommon::common_top_left"></div>
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                尺码设置
                <small>SizeManagement</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">商品设置</a></li>
                <li class="active">尺码设置</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-4" style="overflow:auto; padding: 10px; position: static">
                    <div class="box">
                        <div class="box-header">
                            <a href="/setting/color_management">全部分组</a>
                            <br>
                            <table style="font-size: medium" width="100%">
                                <tr th:each="groups,groupsStat : ${groups}">
                                    <td ><b>&nbsp;&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;&nbsp;</b></td>
                                    <td><a th:text="${groups}" th:href="@{'/setting/size_management?groups=' + ${groups}}"></a></td>
                                    <td><a href="javascript:void(0)" th:onclick="javascript:editGroupDiv([[${groups}]]);"  style="float: right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;修改</a></td>
                                    <td><a href="javascript:void(0)" th:onclick="javascript:deleteGroup([[${groups}]]);" style="float: right">删除</a></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-8" style="overflow:auto; padding: 10px; position: static">
                    <div class="box">
                        <div class="panel-body">
                            <p style="margin: 30px"><b>尺码名称：</b> <input id="findSize"> &nbsp;&nbsp;<button class="btn btn-info" onclick="searchForName()">&nbsp;&nbsp;查询&nbsp;&nbsp;</button><button class="btn btn-info " style="float: right;" onclick="addSizeDiv()">＋新增尺码&nbsp;&nbsp;</button> </p>
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>操作</th>
                                    <th>尺码名称</th>
                                    <th>排序</th>
                                    <th>分组</th>
                                    <th>启用</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="goodsSize,goodsStat : ${goodsSizes}">
                                    <th><a href="javascript:void(0)" th:onclick="'javascript:deleteSize(\''+ ${goodsSize.id} + '\')'">删除</a>
                                        <a  href="javascript:void(0)" th:onclick="javascript:editSizeDiv([[${goodsSize.id}]],[[${goodsSize.name}]],[[${goodsSize.sort}]]);">修改</a> </th>
                                    <td th:text="${goodsSize.name}"></td>
                                    <td th:text="${goodsSize.sort}"></td>
                                    <td th:text="${goodsSize.group}"></td>
                                    <td th:if="${goodsSize.status} == true">&nbsp;&nbsp;√</td>
                                    <td th:if="${goodsSize.status} == false">&nbsp;&nbsp;×</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>

        </section>

            <div class="shadow"></div>
            <div id="editGroup" style="width: 80%;left: 10%;top: 15%;" >
                <div class="row">
                    <div class="col-xs-12">
                        <div style="height: 40px; background: #0b97c4; text-align: center"><p style="font-size: larger"><b>新增尺码</b></p></div>
                        <form style="background: white"  method="post">
                            <table>
                                <tr>
                                    <td class="col-xs-7" id="addTd">分组名称：</td>
                                    <td class="col-xs-5"><input name="name" placeholder="分组名称" id="egroup"></td>
                                </tr>
                                <tr hidden="hidden">
                                    <td class="col-xs-7" id="addTd">分组名称：</td>
                                    <td class="col-xs-5"><input name="name" placeholder="分组名称" id="oldGroup"></td>
                                </tr>
                                <tr>
                                    <td class="col-xs-6" id="addTd"><button onclick="editGroup()" >确定</button></td>
                                    <td class="col-xs-6" style="margin: 0 auto"><button onclick="hideShadow()" >取消</button></td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
            <div id="addSize" style="width: 80%;left: 10%;top: 15%;" >
                <div class="row">
                    <div class="col-xs-12">
                        <div style="height: 40px; background: #0b97c4; text-align: center"><p style="font-size: larger"><b>新增尺码</b></p></div>
                        <form style="background: white" id="size" method="post">
                            <table>
                                <tr>
                                    <td class="col-xs-7" id="addTd">尺码名称：</td>
                                    <td class="col-xs-5"><input name="name" placeholder="尺码名称" id="name"></td>
                                </tr>
                                <tr>
                                    <td class="col-xs-7" id="addTd">排序：</td>
                                    <td class="col-xs-5"><input name="sort" placeholder="1-100之间" id="sort"></td>
                                </tr>
                                <tr>
                                    <td class="col-xs-7" id="addTd">所属分组:</td>
                                    <td class="col-xs-5">
                                        <input name="group" placeholder="所属分组,五个字以内" id="group">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="col-xs-7" id="addTd">启用:</td>
                                    <td class="col-xs-5">
                                        <select name="status">
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="col-xs-6" id="addTd"><button onclick="addSize()" >确定</button></td>
                                    <td class="col-xs-6" style="margin: 0 auto"><button onclick="hideShadow()" >取消</button></td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
        <div id="editSize" style="width: 80%;left: 10%;top: 15%;" >
            <div class="row">
                <div class="col-xs-12">
                    <div style="height: 40px; background: #0b97c4; text-align: center"><p style="font-size: larger"><b>编辑尺寸</b></p></div>
                    <form style="background: white" id="size" method="post">
                        <table>
                            <tr>
                                <td class="col-xs-7" id="addTd">尺寸名称：</td>
                                <td class="col-xs-5"><input name="name" placeholder="尺寸名称" id="ename"></td>
                            </tr>
                            <tr>
                                <td class="col-xs-7" id="addTd">排序：</td>
                                <td class="col-xs-5"><input name="sort" placeholder="1-100之间" id="esort"></td>
                            </tr>
                            <tr>
                                <td class="col-xs-7" id="addTd">所属分组:</td>
                                <td class="col-xs-5">
                                    <input name="group" placeholder="所属分组,五个字以内" id="editgroup">
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-7" id="addTd">启用:</td>
                                <td class="col-xs-5">
                                    <select name="status" id="estatus">
                                        <option value="1">是</option>
                                        <option value="0">否</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-6" id="addTd"><button onclick="editSize()" >确定</button></td>
                                <td class="col-xs-6" style="margin: 0 auto"><button onclick="hideShadow()" >取消</button></td>
                            </tr>
                        </table>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <footer th:replace="common/footer::common_footer"></footer>
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
            <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane" id="control-sidebar-home-tab">
                <h3 class="control-sidebar-heading">Recent Activity</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-birthday-cake bg-red"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                                <p>Will be 23 on April 24th</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-user bg-yellow"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>

                                <p>New phone +1(800)555-1234</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>

                                <p>nora@example.com</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-file-code-o bg-green"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>

                                <p>Execution time 5 seconds</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

                <h3 class="control-sidebar-heading">Tasks Progress</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Custom Template Design
                                <span class="label label-danger pull-right">70%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Update Resume
                                <span class="label label-success pull-right">95%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-success" style="width: 95%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Laravel Integration
                                <span class="label label-warning pull-right">50%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Back End Framework
                                <span class="label label-primary pull-right">68%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

            </div>
            <!-- /.tab-pane -->
            <!-- Stats tab content -->
            <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
            <!-- /.tab-pane -->
            <!-- Settings tab content -->
            <div class="tab-pane" id="control-sidebar-settings-tab">
                <form method="post">
                    <h3 class="control-sidebar-heading">General Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Report panel usage
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Some information about this general settings option
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Allow mail redirect
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Other sets of options are available
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Expose author name in posts
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Allow the user to show his name in blog posts
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <h3 class="control-sidebar-heading">Chat Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Show me as online
                            <input type="checkbox" class="pull-right" checked>
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Turn off notifications
                            <input type="checkbox" class="pull-right">
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Delete chat history
                            <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
                        </label>
                    </div>
                    <!-- /.form-group -->
                </form>
            </div>
            <!-- /.tab-pane -->
        </div>
    </aside>
    <div class="control-sidebar-bg"></div>
</div>



<!-- jQuery 3 -->
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- page script -->
<script>
    $(function () {
        $('#example1').DataTable()
        $('#example2').DataTable({
            'paging'      : true,
            'lengthChange': false,
            'searching'   : false,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false
        })
    })
    function addSize() {
        $.ajax({
            url: "/size/addSize",
            type: "POST",
            data: $("#size").serialize(),
            success: function (data) {
                if (data.code == 1) {
                    window.location.href = "/setting/size_management";
                    alert("增加完成")
                } else {
                    alert(data.msg);
                }
            }
        });
    }
    // 打开增加尺寸框
    function addSizeDiv() {
        $(".shadow").css({'display':'block'});
        $("#addSize").show();
        return 0;
    }
    // 删除尺寸
    function deleteSize(sizeId) {
        $.ajax({
            url:"/size/deleteSize",
            type:'POST',
            data:{
                sizeId:sizeId
            },
            success:function (data) {
                if (data.code == 1) {
                    window.location.href = "/setting/size_management";
                } else {
                    alert(data.msg);
                }
            }
        })
    }
    var esizeId = "";
    // 打开编辑尺码框
    function editSizeDiv(sizeId,sizeName,sizeSort) {
        if (sizeId == null) {
            alert("未知错误");
            return 0;
        }
        esizeId = sizeId;
        $("#ename").val(sizeName);
        $("#esort").val(sizeSort);
        $(".shadow").css({'display':'block'});
        $("#editSize").show();
        return 0;
    }
    // 修改尺码
    function editSize() {
        $.ajax({
            url:"/size/editSize",
            type:'POST',
            data:{
                id:esizeId,
                name:$("#ename").val(),
                sort:$("#esort").val(),
                group:$("#editgroup").val(),
                status:$("#estatus").val()
            },
            success:function (data) {
                if (data.code == 1) {
                    window.location.href = "/setting/size_management";
                    alert("修改成功");
                } else {
                    alert(data.msg);
                }
            }
        })
    }
    // 打开编辑分组框
    function editGroupDiv(groups) {
        if (groups == null) {
            alert("未知错误");
            return 0;
        }
        $("#egroup").val(groups);
        $("#oldGroup").val(groups);
        $(".shadow").css({'display':'block'});
        $("#editGroup").show();
        return 0;
    }

    // 修改分组
    function editGroup() {
        $.ajax({
            url:"/size/editGroup",
            type:'POST',
            data:{
                newGroup:$("#egroup").val(),
                oldGroup:$("#oldGroup").val(),
            },
            success:function (data) {
                if (data.code == 1) {
                    window.location.href = "/setting/size_management";
                    alert("修改成功");
                } else {
                    alert(data.msg);
                }
            }
        })
    }
    // 根据尺码名称查询尺码
    function searchForName() {
        var sizeName = $("#findSize").val();
        window.location.href = "/setting/size_management?sizeName=" + sizeName;
    }

    function hideShadow() {
        $(".shadow").css({'display':'none'});
        $('#addSize').hide();
        $('#editSize').hide();
        $("#size")[0].reset();
    }
    //pc移动分离
    function IsPC() {
        var userAgentInfo=navigator.userAgent;//获取当前浏览器的信息
        var Agents=["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];

        var flag = true;
        for (var i = 0; i < Agents.length; i++) {
            if (userAgentInfo.indexOf(Agents[i]) > 0) {//判断是否是移动端
                flag = false;
                break;
            }
        }
        return flag;
    }
    $(document).ready(function(){
        if(IsPC()){
            $("#editGroup").css({"width": "20%"});
            $("#editGroup").css({"left": "40%"});
            $("#addSize").css({"width": "20%"});
            $("#addSize").css({"left": "40%"});
            $("#editSize").css({"width": "20%"});
            $("#editSize").css({"left": "40%"});//pc端页面显示
        }else{

        }
    })
</script>
</body>
</html>
